<template>
	<el-dialog :title="title" :visible.sync="visible" :modal-append-to-body="false" append-to-body width="50%">
		<div class="row-me width100Per">
			<el-tabs tab-position="left" v-model="activeName" class="width120" @tab-click="handleClick">
				<el-tab-pane v-for="(item,index) in sideData" :key="index" :label="item.name" :name="item.id+''">
				</el-tab-pane>
			</el-tabs>
			<div class="flex1">
				<div class="row-me row-center space-between flex-wrap margin-bottom20">
					<div class="blue-text">
						<i class="el-icon-refresh margin-right10"></i>
						<span @click="getData">刷新</span>
					</div>
					<div class="row-me row-center">
						<el-select placeholder="请选择小试题分类" v-model="query.classId" class="margin-right20" clearable>
							<el-option v-for="(item,index) in classList" :key="index" :label="item.name" :value="item.id"></el-option>
						</el-select>
						<el-input suffix-icon="el-icon-search" class="width300 margin-right20" v-model="query.title"
							placeholder="请输入小试题">
						</el-input>
						<el-button @click="handleSearch" type="primary">搜索</el-button>
					</div>
				</div>
				<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header"
					@selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55" align="center"></el-table-column>
					<el-table-column prop="id" label="ID" align="center" width="100"></el-table-column>
					<el-table-column prop="title" label="试题题目" align="center"></el-table-column>
				</el-table>
				<div class="pagination margin-top10">
					<el-pagination background layout="->,total,sizes, prev, pager, next" :page-sizes="[30, 40, 50, 60]"
						@size-change="handleSizeChange" :current-page="query.pageNumber" :total="pageTotal"
						@current-change="handlePageChange">
					</el-pagination>
				</div>
			</div>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button @click="visible = false">取 消</el-button>
			<el-button type="primary" @click="handleSave">确 定</el-button>
		</span>
	</el-dialog>
</template>

<script>
	export default {
		props: ['title', 'sideData'],
		data() {
			return {
				visible: false,
				activeName: 'first',
				query: {
					pageNumber: 1,
					pageSize: 10
				},
				pageTotal: 0,
				multipleSelection: [],
				tableData: [],
				classList: []
			}
		},
		methods: {
			getClassData() {
				this.$postForm('/admin/question/classAll', {
						pageNumber: 1,
						pageSize: 99999
					})
					.then(res => {
						if (res.code == 1000) {
							this.classList = res.data.list;
						}
					});
			},
			handleClick(tab, event) {
				this.query.type = tab.name
				this.getData()
			},
			handleSelectionChange(val) {
				this.multipleSelection = val
			},
			show() {
				this.query.type = this.sideData && this.sideData.length != 0 ? this.sideData[0].id : ''
				this.getData()
				this.getClassData()
				this.activeName = this.query.type + ''
				this.visible = true
			},
			async getData() {
				const res = await this.$get('/admin/question/pageChildNoQuestions', this.query)
				if (res.code == 1000) {
					this.tableData = res.data.list
					this.pageTotal = res.data.totalRow
				}
			},
			handleSearch() {
				this.query.pageNumber = 1
				this.getData()
			},
			handleSave() {
				this.visible = false
				this.$emit('handleOk', this.multipleSelection)
			},
			handleSizeChange(val) {
				this.$set(this.query, 'pageSize', val);
				this.getData();
			},
			handlePageChange(val) {
				this.$set(this.query, 'pageNumber', val);
				this.getData();
			},
		}
	}
</script>

<style>
</style>